import './index.scss'
import {Button} from "antd";
import {PlusOutlined, MinusOutlined} from "@ant-design/icons";
import {useEffect, useState} from "react";
import {autorun} from "mobx";
import {observer} from "mobx-react-lite";
import {useStore} from "@/store/index.jsx";

const CountBtn = ({row,onDrawerClose}) => {
    const {listStore} = useStore()

    const [carNum, setCarNum] = useState(0) //该物品在购物车中的数量

    // 加入购物车
    const handleAdd = () => {
        listStore.addShoppingCar(row.id)
    }
    const handleDelete = () => {
        listStore.delShoppingCar(row.id)
        if(listStore.carList.length===0){
            onDrawerClose()
        }
    }
    return (<div className={'count-btn'}>
        {(row.orderNum || 0 > 0) &&
            <><Button
                onClick={handleDelete}
                icon={<MinusOutlined className="icon-bold"/>}>
            </Button>
                <span className={'num'}>{row.orderNum || 0}</span>
            </>}
        <Button disabled={row.count <= (row.orderNum || 0)} onClick={handleAdd} type="primary"
                icon={<PlusOutlined className="icon-bold"/>}></Button>

    </div>)
}
export default observer(CountBtn)